<template>
  <el-tabs type="border-card" v-model="activeName" class="demo-tabs">
    <el-tab-pane
      class="p-8"
      :label="$t('pagePower.tabs.tab1.name')"
      name="first"
    >
      <div
        v-if="
          !tab1.powerInformations ||
          Object.keys(tab1.powerInformations).length === 0
        "
      >
        {{ $t('pagePower.tabs.tab1.powerInfo.empty') }}
      </div>
      <div v-else>
        <el-row>
          <el-col
            v-for="(powerinformation, key1, index1) in tab1.powerInformations"
            :key="index1"
            :span="8"
          >
            <el-card style="max-width: 320px">
              <template #header>
                <el-row>
                  <el-col>
                    <h4 class="mb-0 inline">
                      {{ $t('pagePower.tabs.tab1.power') + `${index1 + 1}` }}
                    </h4>
                    <div class="float-right">
                      <h4 class="mb-0 text-3xl inline">
                        {{ tab1.powerNumber }}
                      </h4>
                      <sup class="mb-0 text-sm bottom-[17px]">
                        {{ tab1.unit }}
                      </sup>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col>
                    <h4 class="float-right">
                      {{ $t('pagePower.tabs.tab1.status') }}
                    </h4>
                  </el-col>
                </el-row>
              </template>
              <el-text
                v-for="(value2, key2, index2) in powerinformation"
                :key="index2"
              >
                <el-row>
                  <el-col>
                    {{ key2 }}
                  </el-col>
                  <el-col>
                    {{ value2 }}
                  </el-col>
                </el-row>
              </el-text>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-tab-pane>
    <el-tab-pane
      class="p-8"
      :label="$t('pagePower.tabs.tab2.name')"
      name="second"
    >
      <el-row>
        <el-col :span="3" class="text-2xl">
          {{ $t('pagePower.tabs.tab2.powerStatus') }}
        </el-col>
        <el-col :span="3" class="text-2xl">
          <el-button-group>
            <el-button
              :type="isWActive"
              @click="
                isWActive = 'primary';
                isBTUHActive = '';
                isTab2Unitw = true;
              "
              >W</el-button
            >
            <el-button
              :type="isBTUHActive"
              @click="
                isWActive = '';
                isBTUHActive = 'primary';
                isTab2Unitw = false;
              "
              >BTU/h</el-button
            >
          </el-button-group>
        </el-col>
        <div class="pl-20 pr-20">
          {{ $t('pagePower.tabs.tab2.statisticStart') }}：
          {{ globalStore.formatDateTime(startTime) }}
        </div>
        <el-button type="primary" @click="resetCalculate()">
          {{ $t('pagePower.tabs.tab2.reset') }}
        </el-button>
      </el-row>

      <el-row class="mt-10">
        <el-col
          v-for="(value, key, index) in tab2.powerCapInformation.fieldName"
          :key="index"
          class="mb-8"
          :span="12"
        >
          <el-row>
            <el-col>
              {{ value }}
            </el-col>
            <el-col>
              <span v-if="tab2.unit === 'W'">
                {{ tab2.powerCapInformation.value[key] }}
              </span>
              <span v-if="tab2.unit === 'BTU/h'">
                {{
                  (tab2.powerCapInformation.value[key] * multiple).toFixed(1)
                }}
              </span>
              <sup>{{ tab2.unit }}</sup>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col>
              {{ tab2.totalConsumedPower.fieldName }}
            </el-col>
            <el-col>
              <span v-if="tab2.unit === 'W'">
                {{ (tab2.totalConsumedPower.value / 1000 / 3600).toFixed(1) }}
              </span>
              <span v-if="tab2.unit === 'BTU/h'">
                {{
                  ((tab2.totalConsumedPower.value * multiple) / 3600).toFixed(1)
                }}
              </span>
              <sup>{{ tab2.totalConsumedPower.unit }}</sup>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { usePowerControlStore } from '@/store/SystemManagement/Power/PowerControlStore';
import { usePowerSupplyStore } from '@/store/SystemManagement/SystemInformation/PowerSupplyStore';
import { useGlobalStore } from '@/store/global';
import { useI18n } from 'vue-i18n';

const i18n = reactive(useI18n());
const globalStore = useGlobalStore();
const powerControlStore = usePowerControlStore();
const powerSupplyStore = usePowerSupplyStore();
const activeName = ref('first');

await globalStore.getBmcTime();
await powerSupplyStore.getAllPowerSupplies();

const props = defineProps<{ powerConsumptionValue: number }>();

const currentPeakPower = ref(0);
const multiple = 3.412;
const tab2Unit = ref(true);

const isWActive = ref('primary');
const isBTUHActive = ref('');

const startTime = computed(() => powerControlStore.startCalculateTime);
const isTab2Unitw = computed({
  get() {
    return tab2Unit.value;
  },
  set(value: boolean) {
    tab2Unit.value = value;
  },
});
const powerSupplies = computed(() => powerSupplyStore.powerSupplies);
const powerInformations = computed(() => {
  const powerInformations: any = {};
  powerSupplies.value.forEach(
    (item: { name: any; manufacturer: any; statusState: any }, index: any) => {
      powerInformations[`power${index}`] = {
        [i18n.t('pagePower.tabs.tab1.powerInfo.name')]: item.name,
        [i18n.t('pagePower.tabs.tab1.powerInfo.manufacturer')]:
          item.manufacturer,
        [i18n.t('pagePower.tabs.tab1.powerInfo.statusState')]: item.statusState,
      };
    },
  );
  return powerInformations;
});
const tab1 = computed(() => {
  return {
    powerNumber: props.powerConsumptionValue,
    unit: 'W',
    powerInformations: powerInformations.value,
  };
});
const tab2 = computed(() => {
  return {
    unit: tab2Unit.value ? 'W' : 'BTU/h',
    powerCapInformation: {
      fieldName: {
        currentPower: i18n.t('pagePower.tabs.tab2.currentPower'),
        peakPower: i18n.t('pagePower.tabs.tab2.peakPower'),
        averagePower: i18n.t('pagePower.tabs.tab2.averagePower'),
      },
      value: {
        currentPower: props.powerConsumptionValue,
        peakPower: currentPeakPower.value,
        averagePower: powerControlStore.averagePower,
      },
    },
    totalConsumedPower: {
      fieldName: i18n.t('pagePower.tabs.tab2.totalConsumedPower'),
      value: powerControlStore.totalConsumedPower,
      unit: tab2Unit.value ? 'kWh' : 'BTU',
    },
  };
});

const resetCalculate = () => {
  ElMessageBox.confirm(
    i18n.t('pagePower.table.modal.confirmMessage'),
    i18n.t('pagePower.table.modal.confirmTitle'),
    {
      confirmButtonText: i18n.t('global.action.confirm'),
      cancelButtonText: i18n.t('global.action.cancel'),
      type: 'warning',
    },
  )
    .then(() => {
      powerControlStore.startCalculate();
    })
    .catch(() => {});
};

watch(
  () => props.powerConsumptionValue,
  (value: number) => {
    if (currentPeakPower.value < value) {
      currentPeakPower.value = value;
      powerControlStore.setCurrentPeakPower(currentPeakPower.value);
      powerControlStore.getReadingRangeMax();
    }
  },
);
</script>
